<template>
	<view>
		<view class="card" v-if="show">
			<view>
				<text>{{List.id}}</text>
			</view>
			<view>
				<text>用户名：{{List.name}}</text>
			</view>
			<view>
				<text>手机号：{{List.phone}}</text>
			</view>
			<view @click="refundClick" class="order">
				是否确定接单
			</view>
			<!-- 退款弹窗 -->
			<view v-if="showPop" class="pop">
				<view class="popup-content">
					<text>确定前去救援吗？</text>
					<view class="buttons">
						<button class="buttons1" @click="confirmRefund">确认</button>
						<button class="buttons2" @click="cancelRefund">取消</button>
					</view>
				</view>
			</view>
		</view>
		<view class="card" v-for="(item, index) in formList" :key="index">
			<view>
				<text>用户名：{{item.name}}</text>
			</view>
			<view>
				<text>手机号：{{item.phone}}</text>
			</view>
			<view>
				<text>地址：{{item.position}}</text>
			</view>
			<view>
				<text>时间：{{item.time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				show: false,
				List: '',
				formData: {},
				formList: []
			}
		},
		created() {
			this.socket();
			this.find();
		},
		methods: {
			//申请退款
			refundClick() {
				this.showPop = true; // 显示弹窗
			},
			confirmRefund() {
				this.showPop = false;
				this.update();
				this.find();
			},
			cancelRefund() {
				this.showPop = false;
			},
			//查询
			find() {
				const mid = 6; // 替换为实际的 mid 值
				uni.request({
					url: `http://localhost:7001/ruoyi-merchant/rescueTask/selectByMid/${mid}`, // 替换为你的 API URL
					method: 'GET',
					header: {
						'authorization': 'Bearer ' + this.token
					},
					success: (res) => {
						/* if (res.data.code === 200) {
							console.log('救援任务:', res.data.data);
						} else {
							console.error('查询失败:', res.data.message);
						} */
						this.formList = res.data.data
						console.log(111)
					},
					fail: (err) => {
						console.error('请求错误:', err);
					}
				});
			},
			//接单
			update() {
				uni.request({
					url: 'http://localhost:7001/ruoyi-merchant/rescueTask',
					method: 'PUT',
					data: {
						id: this.List.id,
						mid: 6,
						status: 1,
					},
					header: {
						'authorization': 'Bearer ' + this.token
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(this.formData);
							this.show = false;
							this.find();
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				})
			},
			//webSocket
			socket() {
				//创建webSocket
				this.webSocketTask = uni.connectSocket({
					url: 'ws://localhost:7001/ruoyi-merchant/imserver/6',
					success(res) {
						console.log('成功', res);
					},
				})

				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.webSocketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.webSocketTask.send({
						data: "uni-app发送一条消息",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.webSocketTask.onMessage((res) => {
						console.log("收到的消息:", res.data); // 添加日志输出
						// 检查是否是有效的 JSON 字符串
						if (res.data && res.data.trim().startsWith('{')) {
							this.show = true;
							try {
								let data = JSON.parse(res.data);
								this.List = data;
							} catch (error) {
								console.error("解析 JSON 失败:", error);
							}
						} else {
							console.warn("收到非 JSON 数据:", res.data); // 处理非 JSON 数据
						}
					});
				})
			},
		}
	}
</script>

<style>
	/* 卡片样式 */
	.card {
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 20px;
		margin: 10px;
	}

	/* 文本样式 */
	.card text {
		display: block;
		margin-bottom: 8px;
		font-size: 16px;
	}

	/* 按钮容器样式 */
	.buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	/* 按钮样式 */
	.order {
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
		margin-left: 30%;
		font-size: 16px;
		color: red;
	}

	.buttons1 {
		background-color: lightskyblue;
		height: 35px;
		line-height: 30px;
		/* 确认按钮颜色 */
	}

	.buttons2 {
		background-color: indianred;
		margin-left: 20px;
		height: 35px;
		line-height: 30px;
		/* 取消按钮颜色 */
	}

	/* 弹窗样式 */
	.pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		background: white;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		max-width: 80%;
		text-align: center;
	}
</style>